<html>
  <head>
    <meta charset="utf-8" />
    <title>SCU-MES-KBN</title>
    <script src="./static/jquery.min.js"></script>
    <script src="./static/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/index.css" />
    <link rel="stylesheet" type="text/css" href="./static/layui/layui.css" />
  </head>
  <body>
    <style>
      .kanban {
        width: 100%;
        height: 100%;
        background-image: url(./static/images/bg.jpg);
        background-size: cover;
        color: #666666;
      }
      .main {
        width: 100%;
        height: 100%;
      }
      .canvas {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
      }
      .small-font {
        font-size: 0.6rem !important;
      }
      .normal-font {
        font-size: 0.8rem !important;
      }
      .big-font {
        font-size: 1rem !important;
      }

      .header {
        height: 4rem;
        background: url(./static/images/head_bg.png) no-repeat center center;
        background-size: 100% 100%;
        position: relative;
        z-index: 100;
      }
      .header h1 {
        color: #fff;
        text-align: center;
        font-size: 1.3rem;
        line-height: 4rem;
      }
      .logo {
        background-image: url(./static/images/kanban_logo.png);
        background-repeat: no-repeat;
        background-size: auto 60%;
        position: absolute;
        left: 1rem;
        top: 1rem;
        height: 3rem;
        width: 10rem;
        z-index: 200;
      }
      .now-time {
        position: absolute;
        right: 1rem;
        top: 1rem;
        height: 2rem;
        color: #bbbbbb;
        font-size: 1rem;
        line-height: 2rem;
        z-index: 200;
      }

      .bar-row {
        display: flex;
        padding: 0 0.8rem;
        margin-top: 0.3rem;
        margin-bottom: 0.8rem;
      }
      .barbox {
        padding: 0;
        flex: 1;
        margin-right: 0.8rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        position: relative;
      }
      .barbox:last-child {
        margin-right: 0;
      }
      .barbox:before,
      .barbox:after {
        position: absolute;
        width: 1.2rem;
        height: 0.4rem;
        content: '';
      }
      .barbox:before {
        border-left: 2px solid #02a6b5;
        left: 0;
        border-top: 2px solid #02a6b5;
      }
      .barbox:after {
        border-right: 2px solid #02a6b5;
        right: 0;
        bottom: 0;
        border-bottom: 2px solid #02a6b5;
      }
      .barbox li {
        width: 50%;
        text-align: center;
        position: relative;
        z-index: 100;
        background: rgba(0, 255, 255, 0.2);
        padding-top: 0.4rem;
      }
      .barbox li.title {
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.8);
      }
      .barbox li.counter {
        font-size: 2rem;
        padding: 0.5rem 0;
        font-family: electronicFont;
        font-weight: bold;
      }
      .barbox li:first-child:before {
        position: absolute;
        content: '';
        height: 50%;
        width: 1px;
        background: rgba(255, 255, 255, 0.2);
        right: 0;
        top: 25%;
      }

      .content {
        height: calc(100% - 10.6rem);
        padding: 0 0.8rem;
      }

      .boxall {
        width: 100%;
        height: 100%;
        border: 1px solid rgba(25, 186, 139, 0.17);
        padding: 0 0.8rem;
        background: rgba(255, 255, 255, 0.04) url(./static/images/line.png);
        background-size: 100% auto;
        position: relative;
        z-index: 10;
      }
      .boxall:before,
      .boxall:after {
        position: absolute;
        width: 0.6rem;
        height: 0.6rem;
        content: '';
        border-top: 2px solid #02a6b5;
        top: 0;
      }
      .boxall:before,
      .boxfoot:before {
        border-left: 2px solid #02a6b5;
        left: 0;
      }
      .boxall:after,
      .boxfoot:after {
        border-right: 2px solid #02a6b5;
        right: 0;
      }
      .alltitle {
        font-size: 0.8rem;
        color: #fff;
        text-align: center;
        line-height: 2rem;
      }
      .allnav {
        height: calc(100% - 2rem);
        overflow: hidden;
      }
      .allnav .layui-table {
        margin: 0;
      }
      .allnav .layui-table,
      .allnav .layui-table tbody tr:hover {
        background-color: transparent;
        color: #ccc;
      }
      .allnav .layui-table thead tr {
        background-color: rgba(0, 255, 255, 0.2);
      }
      .allnav .layui-table[lay-even] tr:nth-child(even) {
        background-color: rgba(0, 255, 255, 0.2);
      }
      .allnav .layui-table td {
        text-align: center;
        font-size: 1rem;
        line-height: 3rem;
        padding: 0;
      }
      .allnav .layui-table th {
        text-align: center;
        color: #02a6b5;
        font-weight: 800;
        font-size: 1rem;
        line-height: 3rem;
        padding: 0;
      }
      .boxfoot {
        position: absolute;
        bottom: 0;
        width: 100%;
        left: 0;
      }
      .boxfoot:before,
      .boxfoot:after {
        position: absolute;
        width: 0.6rem;
        height: 0.6rem;
        content: '';
        border-bottom: 2px solid #02a6b5;
        bottom: 0;
      }
      .footer {
        height: 1rem;
        padding: 0.2rem 0;
        font-size: 0.6rem;
        text-align: center;
        color: #bbbbbb;
      }
    </style>
    <div class="canvas" style="opacity: 0.2;">
      <!-- <iframe frameborder="0" src="./background.html" style="width: 100%; height: 100%;"></iframe> -->
    </div>
    <div id="app" class="kanban">
      <div class="logo"></div>
      <div class="now-time"><span>{{showData.today}}</span></div>
      <!-- 隐藏div用于显示选择框 -->
      <div id="selectOrgArea" style="width: 100%;min-height: 12rem;padding: 1rem;display: none;">
        <div style="padding: 0.2rem;" v-for="(d,i) in orglist" :key="i">
          <button style="width: 100%;" type="button" @click.prevent="chooseOrg(d)" class="layui-btn layui-btn-primary">
            {{d.plant_name}}
          </button>
        </div>
      </div>
      <div class="main">
        <div class="header">
          <h1 @click="selectOrg">{{orgName}}&nbsp;{{kanbanTitle}}</h1>
        </div>
        <div class="bar-row">
          <div class="barbox">
            <ul class="clearfix">
              <li class="pull-left title">目标总计</li>
              <li class="pull-left title">产出总计</li>
            </ul>
            <ul class="clearfix" style="color:#00dd21;">
              <li class="pull-left counter">{{showData.summary.target_ttl}}</li>
              <li class="pull-left counter">{{showData.summary.output_ttl}}</li>
            </ul>
          </div>
          <div class="barbox">
            <ul class="clearfix">
              <li class="pull-left title">产品型号数量</li>
              <li class="pull-left title">工单制令数量</li>
            </ul>
            <ul class="clearfix" style="color:#FFB800;">
              <li class="pull-left counter">{{showData.summary.product_qty}}</li>
              <li class="pull-left counter">{{showData.summary.mo_qty}}</li>
            </ul>
          </div>
          <div class="barbox">
            <ul class="clearfix">
              <li class="pull-left title">人力编制</li>
              <li class="pull-left title">实际出勤</li>
            </ul>
            <ul class="clearfix" style="color:#C1232B;">
              <li class="pull-left counter">{{showData.summary.established_human}}</li>
              <li class="pull-left counter">{{showData.summary.attendance_human}}</li>
            </ul>
          </div>
        </div>
        <div class="content flex">
          <div style="width: 55%;height:100%;margin-right: 0.8rem;">
            <div class="boxall" id="linebox">
              <div class="alltitle">各线生产进度</div>
              <div class="allnav">
                <table class="layui-table" lay-even lay-skin="nob">
                  <thead>
                    <tr>
                      <th>线别</th>
                      <th>机种</th>
                      <th>出勤</th>
                      <th>目标</th>
                      <th>产出</th>
                      <th>达成率</th>
                      <th>良率</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(d,i) in showLineData" :key="i">
                      <td>{{d.line_name}}</td>
                      <td>{{d.cust_pn_name}}</td>
                      <td>{{d.attendance_qty}}</td>
                      <td>{{d.output_target}}</td>
                      <td>{{d.output_qty}}</td>
                      <td>
                        <div class="layui-progress" style="overflow: hidden;height: 0.8rem;line-height: 0.8rem;">
                          <div
                            class="layui-progress-bar"
                            style="height: 0.8rem;line-height: 0.8rem;"
                            :class="d.output_rate>80?'layui-bg-green':(d.output_rate>60?'layui-bg-orange':'layui-bg-red')"
                            :style="{width: (d.output_rate + '%')}"
                          ></div>
                        </div>
                      </td>
                      <td>
                        <span class="layui-badge" :class="d.yield_rate>94?'layui-bg-green':''">{{d.yield_rate}}%</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="boxfoot"></div>
            </div>
          </div>
          <div class="flex1">
            <div style="height:50%;margin-bottom:0.8rem;">
              <div class="boxall" id="wipbox">
                <div class="alltitle">在制品分布</div>
                <div class="allnav">
                  <table class="layui-table" lay-even lay-skin="nob">
                    <thead>
                      <tr>
                        <th>工单</th>
                        <th>机种</th>
                        <th v-for="(t,i) in showData.groupBrief" :key="i" class="normal-font">{{t}}</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(d,i) in showWipData" :key="i">
                        <td>{{d.mo_no}}</td>
                        <td>{{d.cust_pn_name}}</td>
                        <td v-for="(t,j) in d.qty" :key="j">{{t}}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="boxfoot"></div>
              </div>
            </div>
            <div class="flex" style="height:50%;padding-bottom: 0.8rem;">
              <div style="width:50%;height:100%;margin-right:0.8rem;">
                <div class="boxall">
                  <div class="alltitle">近一周TOP5不良分布</div>
                  <div class="allnav">
                    <div id="chart1" style="height:100%;"></div>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </div>
              <div style="width:50%;height:100%;">
                <div class="boxall">
                  <div class="alltitle">近一周TOP5不良产品</div>
                  <div class="allnav">
                    <div id="chart2" style="height:100%;"></div>
                  </div>
                  <div class="boxfoot"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">合肥智慧云上信息技术有限公司 技术支持</div>
      </div>
    </div>
  </body>
  <script src="./static/lodash.min.js"></script>
  <script src="./static/dayjs.js"></script>
  <script src="./static/layui/layer.js"></script>
  <script src="./static/echarts/echarts.min.js"></script>
  <script src="./static/echarts/my-echarts-theme.js"></script>
  <script>
    var URL = 'http://' + location.hostname + ':8080/mes_api'
    // URL = 'http://121.36.229.129:8080/mes_api'
    var storageKey = 'kanban_default_plant'

    //根据窗口宽度动态设置根节点的字体大小
    var remPx = 12
    function setRem() {
      var html = document.getElementsByTagName('html')[0]
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth
      remPx = parseInt(oWidth / 80)
      html.style.fontSize = remPx + 'px'
    }
    setRem()

    //Echarts
    var chart1 = {}
    var chart2 = {}
    var chart1_default_option = {
      title: { show: false },
      legend: { show: false },
      dataset: {
        source: [{ name: 'NA', qty: 0 }]
      },
      series: [
        {
          name: '数量',
          type: 'pie',
          radius: ['20%', '40%'],
          label: {
            show: true,
            fontWeight: 600,
            formatter: '{b}\n{d}%',
            fontSize: this.remPx * 0.6
          }
        }
      ]
    }
    var chart2_default_option = {
      title: { show: false },
      legend: { show: false },
      grid: {
        top: '5%',
        right: '10%',
        bottom: '10%',
        left: '25%'
      },
      dataset: {
        source: [{ name: 'NA', qty: 0 }]
      },
      xAxis: { show: false },
      yAxis: {
        type: 'category',
        axisTick: { show: false },
        axisLabel: { fontSize: this.remPx * 0.6, color: '#eeeeee' }
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          barMaxWidth: '40%',
          label: {
            show: true,
            position: 'insideLeft',
            fontSize: this.remPx * 0.6
          }
        }
      ]
    }

    //列表滚动计算准备
    var lineMaxRow = 1
    var wipMaxRow = 1
    function calRows() {
      var linebox = document.querySelector('#linebox>.allnav')
      var theadHeight = linebox.querySelector('table>thead').clientHeight
      lineMaxRow = parseInt(linebox.clientHeight / theadHeight) - 1
      lineMaxRow = lineMaxRow > 1 ? lineMaxRow : 1
      var wipbox = document.querySelector('#wipbox>.allnav')
      var theadHeight = wipbox.querySelector('table>thead').clientHeight
      wipMaxRow = parseInt(wipbox.clientHeight / theadHeight) - 1
      wipMaxRow = wipMaxRow > 1 ? wipMaxRow : 1
    }

    //窗口大小变化监听
    window.onresize = function() {
      setRem()
      calRows()
      chart1.resize()
      chart2.resize()
    }

    var app = new Vue({
      el: '#app',
      data: function() {
        return {
          URL: URL,
          remPx: remPx, //根字体大小px
          orgId: '', //组织ID 暂时用不到
          orgName: '', //组织名称
          kanbanTitle: '数据展示平台',
          timer: null, //拉取数据定时器
          timerScroll: null, //表格滚动定时器
          showData: {
            today: '2020-01-01 12:00',
            summary: {
              product_qty: 0,
              mo_qty: 0,
              attendance_human: 0,
              established_human: 0
            },
            lineData: [],
            wipData: [],
            groupBrief: []
          },
          showLineData: [],
          showWipData: [],
          orglist: [],
          selectOrgLayerIndex: null //组织选择框的层id
        }
      },
      methods: {
        selectOrg: function() {
          //打开组织选择框
          this.selectOrgLayerIndex = layer.open({
            type: 1,
            title: '请选择数据范围',
            closeBtn: false,
            area: [20 * remPx + 'px'],
            btn: '取消',
            shade: 0.8,
            content: $('#selectOrgArea'),
            cancel: function() {}
          })
        },
        chooseOrg: function(d) {
          this.orgName = d.plant_name
          this.orgId = d.id
          localStorage.setItem(storageKey, JSON.stringify(d))
          this.refreshData() //选了线别之后重新拉取数据
          layer.close(this.selectOrgLayerIndex)
        },
        initCharts: function() {
          chart1 = echarts.init(document.getElementById('chart1'), 'mytheme')
          chart1.setOption(chart1_default_option)
          chart2 = echarts.init(document.getElementById('chart2'), 'mytheme')
          chart2.setOption(chart2_default_option)
        },
        refreshData: function() {
          var that = this
          clearTimeout(this.timer) //清除定时器
          //获取时间
          $.ajax(URL + '/platform/time/sync', {
            type: 'get',
            success: function(r) {
              that.showData.today = r ? r : ''
            }
          })
          //获取当前生产产品信息
          $.ajax(URL + '/kbn/production/getlist', {
            type: 'get',
            data: { plant: that.orgName },
            success: function(r) {
              that.showData.summary = Object.assign({}, that.showData.summary, r)
            }
          })
          //获取各线生产进度
          $.ajax(URL + '/kbn/output/plant/line/getlist', {
            type: 'get',
            data: { plant: that.orgName },
            success: function(r) {
              that.showData.lineData = r.output
              that.showData.summary = Object.assign({}, that.showData.summary, r.datas[1].total)
              that.showTableScrollData()
            }
          })
          //获取在制品分布
          $.ajax(URL + '/kbn/wip_summary/getlist', {
            type: 'get',
            data: { plant: that.orgName },
            success: function(r) {
              that.showData.wipData = r.datas[1].lstResult
              that.showData.groupBrief = r.lstGroupBrief
              that.showTableScrollData()
            }
          })
          //获取Top5不良分布Top5不良产品
          $.ajax(URL + '/kbn/yield_rate/topec/getlist', {
            type: 'get',
            data: { plant: that.orgName },
            success: function(r) {
              var tmp = _.map(r.top_ec, function(i) {
                return { name: i.error_name, qty: i.qty }
              })
              chart1.setOption({
                dataset: { source: tmp }
              })
              tmp = _.map(r.datas[1].ec_sku, function(i) {
                return { name: i.model_code, qty: i.qty }
              })
              chart2.setOption({
                dataset: { source: tmp }
              })
            }
          })
          //数据拉取请求全部发起完成
          this.timer = setTimeout(this.refreshData, 60000) //再拉取定时器
        },
        showTableScrollData: function() {
          clearTimeout(this.timerScroll) //清除定时器
          var that = this
          //line滚动处理
          if (this.showData.lineData.length > lineMaxRow) {
            //需要滚动
            if (this.showLineData.length != lineMaxRow) {
              //尺寸变化需要重置
              this.showLineData = _.slice(this.showData.lineData, 0, lineMaxRow)
            } else {
              //找到已显示的最后一个数组元素
              var x = _.findIndex(that.showData.lineData, function(o) {
                //依据主键字段
                return o.line_name == _.last(that.showLineData).line_name && o.line == _.last(that.showLineData).line
              })
              x >= this.showData.lineData.length - 1 ? (x = 0) : x++
              var tmp = _.drop(this.showLineData)
              tmp.push(this.showData.lineData[x])
              this.showLineData = tmp
            }
          } else {
            this.showLineData = this.showData.lineData
          }
          //wip滚动处理
          if (this.showData.wipData.length > wipMaxRow) {
            //需要滚动
            if (this.showWipData.length != wipMaxRow) {
              //尺寸变化需要重置
              this.showWipData = _.slice(this.showData.wipData, 0, wipMaxRow)
            } else {
              //找到已显示的最后一个数组元素
              var x = _.findIndex(that.showData.wipData, function(o) {
                //依据主键字段
                return o.mo_no == _.last(that.showWipData).mo_no
              })
              x >= this.showData.wipData.length - 1 ? (x = 0) : x++
              var tmp = _.drop(this.showWipData)
              tmp.push(this.showData.wipData[x])
              this.showWipData = tmp
            }
          } else {
            this.showWipData = this.showData.wipData
          }
          this.timerScroll = setTimeout(this.showTableScrollData, 2000) //2秒滚动一次
        }
      },
      mounted: function() {
        var that = this
        //初始化Echarts
        that.initCharts()
        //计算滚动行数
        calRows()
        //获取线别列表
        $.get(URL + '/kbn/plant/getlist?size=10&page=1', {}, function(r) {
          that.orglist = r.list
        })
        //获取缓存默认的ORG数据
        var org = localStorage.getItem(storageKey)
        if (org) {
          org = JSON.parse(org)
          that.orgId = org.id
          that.orgName = org.plant_name
          //启动拉取数据
          that.refreshData()
        } else {
          //打开组织选择框
          that.selectOrg()
        }
      }
    })
  </script>
</html>
